<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>{{ title }}</span>
                <div class="extra">
                    <slot name="extra"></slot>
                </div>
            </div>
        </template>
        <slot></slot>
        <div class="pagination">
            <slot name="pagination"></slot>
        </div>
    </el-card>
</template>

<script setup>
defineProps({
   title:{
    type:String,
    required:true
   }
})
</script>

<style scoped>
.page-container{
    min-height: 100%;
    box-sizing: border-box;
}
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.extra{
    display: flex;
    justify-content: flex-end;
    margin-right: 1100px;
}
</style>

